{{ header }}
<div id="product-search" class="containers">
    {#<ul class="breadcrumb">#}
    {#{% for breadcrumb in breadcrumbs %}#}
    {#<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>#}
    {#{% endfor %}#}
    {#</ul>#}
  <div class="row">{{ column_left }}
      {% if column_left and column_right %}
          {% set class = 'col-sm-6' %}
      {% elseif column_left or column_right %}
          {% set class = 'col-sm-9' %}
      {% else %}
          {% set class = 'col-sm-12' %}
      {% endif %}
    <div id="content" class="col-sm-12">{{ content_top }}
      <h1>{{ heading_title }}</h1>
      <label class="control-label" for="input-search">{{ entry_search }}</label>
      <div class="row">
        <div class="col-sm-4">
          <input type="text" name="search" value="{{ search }}" placeholder="{{ text_keyword }}" id="input-search" class="form-control" />
        </div>
          {#搜索指定类目#}
        <div class="col-sm-3">
          <select name="category_id" class="form-control">
            <option value="0">{{ text_category }}</option>
              {% for category_1 in categories %}
                  {% if category_1.category_id == category_id %}
                    <option value="{{ category_1.category_id }}" selected="selected">{{ category_1.name }}</option>
                  {% else %}
                    <option value="{{ category_1.category_id }}">{{ category_1.name }}</option>
                  {% endif %}
                  {% for category_2 in category_1.children %}
                      {% if category_2.category_id == category_id %}
                        <option value="{{ category_2.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
                      {% else %}
                        <option value="{{ category_2.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
                      {% endif %}
                      {% for category_3 in category_2.children %}
                          {% if category_3.category_id == category_id %}
                            <option value="{{ category_3.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
                          {% else %}
                            <option value="{{ category_3.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
                          {% endif %}
                      {% endfor %}
                  {% endfor %}
              {% endfor %}
          </select>
        </div>
        <div class="col-sm-3">
          <label class="checkbox-inline">
              {% if sub_category %}
                <input type="checkbox" name="sub_category" value="1" checked="checked" />
              {% else %}
                <input type="checkbox" name="sub_category" value="1" />
              {% endif %}
              {{ text_sub_category }}</label>
        </div>
      </div>
      <p>
        <label class="checkbox-inline">
            {% if description %}
              <input type="checkbox" name="description" value="1" id="description" checked="checked" />
            {% else %}
              <input type="checkbox" name="description" value="1" id="description" />
            {% endif %}
            {{ entry_description }}</label>
      </p>
      <input type="button" value="{{ button_search }}" id="button-search" class="blue-btn" />
        {#<h2>{{ text_search }}</h2>#}
        {% if products %}

            {#<div class="row" style="padding-top: 10px;">#}
            {#<div class="col-md-2 col-sm-6 hidden-xs">#}
            {#<div class="btn-group btn-group-sm">#}
            {#<button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>#}
            {#<button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>#}
            {#</div>#}
            {#</div>#}
            {#<div class="col-md-3 col-sm-6">#}
            {#<div class="form-group">#}
            {#<a href="{{ compare }}" id="compare-total" class="btn btn-link">{{ text_compare }}</a>#}
            {#</div>#}
            {#</div>#}
            {#<div class="col-md-4 col-xs-6">#}
            {#<div class="form-group input-group input-group-sm">#}
            {#<label class="input-group-addon" for="input-sort">{{ text_sort }}</label>#}
            {#<select id="input-sort" class="form-control" onchange="location = this.value;">#}
            {#{% for sorts in sorts %}#}
            {#{% if sorts.value == '%s-%s'|format(sort, order) %}#}
            {#<option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>#}
            {#{% else %}#}
            {#<option value="{{ sorts.href }}">{{ sorts.text }}</option>#}
            {#{% endif %}#}
            {#{% endfor %}#}
            {#</select>#}
            {#</div>#}
            {#</div>#}
            {#<div class="col-md-3 col-xs-6">#}
            {#<div class="form-group input-group input-group-sm">#}
            {#<label class="input-group-addon" for="input-limit">{{ text_limit }}</label>#}
            {#<select id="input-limit" class="form-control" onchange="location = this.value;">#}
            {#{% for limits in limits %}#}
            {#{% if limits.value == limit %}#}
            {#<option value="{{ limits.href }}" selected="selected">{{ limits.text }}</option>#}
            {#{% else %}#}
            {#<option value="{{ limits.href }}">{{ limits.text }}</option>#}
            {#{% endif %}#}
            {#{% endfor %}#}
            {#</select>#}
            {#</div>#}
            {#</div>#}
            {#</div>#}

          <div style="margin-top: 10px;" class="category-top-select">
            <div class="container">
              <div class="row">
                <div class="col-md-3 col-sm-6 hidden-xs">
                  <!--<div class="form-group"><a href="{{ compare }}" id="compare-total" class="btn btn-link">{{ text_compare }}</a></div>-->
                  <div class="form-group">
                    <select class="form-control" onchange="location = this.value;">
                      <option value="{{ colorsdf }}">Color</option>
                        {% for colors in colors %}
                            {% if colors.value == color %}
                              <option value="{{ colors.href }}" selected="selected">{{ colors.text }}
                                ({{ colors.num }})
                              </option>
                            {% else %}
                              <option value="{{ colors.href }}">{{ colors.text }} ({{ colors.num }})</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                  </div>
                </div>
                <div class="col-xs-6 hidden-lg hidden-md hidden-sm">
                  <div id="category-filter">
                    <i class="fa fa-filter"></i>Filter<i class="fa fa-angle-right"></i>
                  </div>
                </div>
                <div class="col-xs-6 hidden-lg hidden-md hidden-sm">
                    {#<label class="input-group-addon" for="input-sort">{{ text_sort }}</label>#}
                  <select class="form-control input-sort" onchange="location = this.value;">
                      {% for sorts in sorts %}
                          {% if sorts.value == '%s-%s'|format(sort, order) %}
                            <option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
                          {% else %}
                            <option value="{{ sorts.href }}">{{ sorts.text }}</option>
                          {% endif %}
                      {% endfor %}
                  </select>
                </div>
              </div>
              <div id="category-filter-box" style="display: none">
                <div class="filter-title">Filter:</div>
                <hr />
                <div class="form-group">
                  <select class="form-control" onchange="location = this.value;">
                    <option value="{{ colorsdf }}">Color</option>
                      {% for colors in colors %}
                          {% if colors.value == color %}
                            <option value="{{ colors.href }}" selected="selected">{{ colors.text }}
                              ({{ colors.num }})
                            </option>
                          {% else %}
                            <option value="{{ colors.href }}">{{ colors.text }} ({{ colors.num }})</option>
                          {% endif %}
                      {% endfor %}
                  </select>
                </div>
              </div>
            </div>
          </div>
          <script>
              $('#category-filter').on('click',function(){
                  $('#category-filter-box').slideToggle();
                  $(this).toggleClass('active');
              })
          </script>


          <div class="row">
              {% for product in products %}
                <div class="product-layout product-list col-xs-12 col-ms-12 col-md-4 col-lg-4">
                  <div class="">
                    <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}"
                                                                         alt="{{ product.name }}"
                                                                         title="{{ product.name }}"
                                                                         class="img-responsive"
                                                                         style="width: 100%;"/></a></div>
                    <div class="product-thumb goods-list">
                      <div class="captions">
                        <h4 class="caption-title"><a href="{{ product.href }}" style="color: #000;">{{ product.name }}</a></h4>
                          {#<p>{{ product.description }}</p>#}
                          {% if product.price %}
                            <p class="price">
                              {% if not product.special %}
                                <div class="no-special">{{ product.price }}</div>
                              {% else %}
                                <div class="row"><span class="price-old text-center">{{ product.price }}</span><span class="price-new text-center">{{ product.special }}</span></div>
                                <div class="price-tax text-center">Save Off: {{ product.saveoff }}%</div>
                              {% endif %}
                              {% if product.tax %}
                                  {#<span class="price-tax">{{ text_tax }} {{ product.tax }}</span>#}
                              {% endif %}
                            </p>
                          {% endif %}
                          {% if product.rating %}
                            <div class="rating">
                                {% for i in 1..5 %}
                                    {% if product.rating < i %}
                                      <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                                    {% else %}
                                      <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                                    {% endif %}
                                {% endfor %}
                            </div>
                          {% endif %}
                      </div>
                        {#<div class="button-group">#}
                        {#<button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>#}
                        {#<button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>#}
                        {#<button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>#}
                        {#</div>#}
                    </div>
                  </div>
                </div>
              {% endfor %}
          </div>
          <div class="row">
            <div class="col-sm-6 text-left">{{ pagination }}</div>
            <div class="col-sm-6 text-right">{{ results }}</div>
          </div>
        {% else %}
          <p>{{ text_empty }}</p>
        {% endif %}
        {{ content_bottom }}</div>
      {{ column_right }}</div>
</div>
<script type="text/javascript"><!--
    $('#button-search').bind('click', function() {
        url = 'index.php?route=product/search';

        var search = $('#content input[name=\'search\']').prop('value');

        if (search) {
            url += '&search=' + encodeURIComponent(search);
        }

        var category_id = $('#content select[name=\'category_id\']').prop('value');

        if (category_id > 0) {
            url += '&category_id=' + encodeURIComponent(category_id);
        }

        var sub_category = $('#content input[name=\'sub_category\']:checked').prop('value');

        if (sub_category) {
            url += '&sub_category=true';
        }

        var filter_description = $('#content input[name=\'description\']:checked').prop('value');

        if (filter_description) {
            url += '&description=true';
        }

        location = url;
    });

    $('#content input[name=\'search\']').bind('keydown', function(e) {
        if (e.keyCode == 13) {
            $('#button-search').trigger('click');
        }
    });

    $('select[name=\'category_id\']').on('change', function() {
        if (this.value == '0') {
            $('input[name=\'sub_category\']').prop('disabled', true);
        } else {
            $('input[name=\'sub_category\']').prop('disabled', false);
        }
    });

    $('select[name=\'category_id\']').trigger('change');
    --></script>
{{ footer }}